<!--
    运维工单分配
 -->
<template>
  <div class="page">
    <div class="nuclein-query">
      <div>运维工单分配</div>
      <!-- <div style="margin-left: auto;">
        <el-button type="primary" size="small" @click="handlerConfig()">远程配置更新</el-button>
        <el-button type="primary" size="small" @click="handlerFirmware()">远程固件更新</el-button>
      </div> -->
    </div>
    <div class="content-row">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="工单任务名称" prop="repairTaskName" align="center" min-width="140">
        </el-table-column>
        <el-table-column label="所在小区" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.estateName }}
          </template>
        </el-table-column>
        <el-table-column label="设备名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.equipmentName }}
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="equipmentType" align="center" min-width="140">
          <template slot-scope="scope">
            <el-tag :type="scope.row.equipmentType ? 'success' : 'primary'">
              {{ scope.row.equipmentType ? '摄像头' : '门禁机' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工单任务执行原因" prop="repairTaskWhy" align="center" min-width="140">
        </el-table-column>
        <el-table-column label="工单任务执行师傅" prop="userName" align="center" min-width="140">
        </el-table-column>
        <el-table-column label="工单任务验收人" prop="repairAcceptanceUserId" align="center" min-width="140">
        </el-table-column>
        <el-table-column label="工单任务验收状态" prop="repairAcceptanceState" align="center" min-width="140">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.repairAcceptanceState == null" type="warning">未验收</el-tag>
            <el-tag v-else :type="scope.row.repairAcceptanceState == 0 ? 'warning' : 'success'">
              {{ scope.row.repairAcceptanceState == 0 ? '未验收' : '已验收' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工单任务执行结果" prop="repairTaskResults" align="center" min-width="140">
        </el-table-column>
        <el-table-column label="工单任务执行状态" prop="repairTaskState" align="center" min-width="140">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.repairTaskState == 0 | scope.row.repairTaskState == null" type="info">未执行</el-tag>
            <el-tag v-else-if="scope.row.repairTaskState == 1" type="warning">执行中</el-tag>
            <el-tag v-else-if="scope.row.repairTaskState == 2" type="succes">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">分配工单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- // 分页 -->
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 抽屉弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
        <el-row>
          <el-col :span="span">
            <el-form-item label="工单任务名称" prop="repairTaskName">
              <el-input v-model="ruleForm.repairTaskName" placeholder="请输入工单任务名称" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="设备" prop="equipmentId">
              <el-select v-model="ruleForm.equipmentId" placeholder="请选择设备" disabled>
                <el-option v-for="item in deviceIdList" :key="item.deviceId" :label="item.deviceName"
                  :value="item.deviceId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="span">
            <el-form-item label="设备类型" prop="equipmentType">
              <el-select v-model="ruleForm.equipmentType" placeholder="请选择设备类型" disabled>
                <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="所在小区" prop="estateId">
              <el-select v-model="ruleForm.estateId" placeholder="请选择所在小区" disabled>
                <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName"
                  :value="item.estateId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="span">
            <el-form-item label="工单任务验收状态" prop="repairAcceptanceState">
              <el-select v-model="ruleForm.repairAcceptanceState" placeholder="请选择工单任务验收状态">
                <el-option label="已验收" value="1"></el-option>
                <el-option label="未验收" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="span" v-if="ruleForm.repairAcceptanceState != 0">
            <el-form-item label="工单任务验收人" prop="repairAcceptanceUserId">
              <el-input v-model="ruleForm.repairAcceptanceUserId" placeholder="请输入工单任务验收人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="派遣维修师傅" prop="userId">
          <el-select v-model="ruleForm.userId" placeholder="请选择维修师傅">
            <el-option v-for="item in repairList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单任务执行状态" prop="repairTaskState">
          <el-select v-model="ruleForm.repairTaskState" placeholder="请选择工单任务验收状态">
            <el-option v-for="item in repairTaskStates" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.repairTaskState == 2" label="工单任务执行结果" prop="repairTaskResults">
          <el-input v-model="ruleForm.repairTaskResults" placeholder="请输入工单任务执行结果"></el-input>
        </el-form-item>
        <el-form-item label="工单任务执行原因" prop="repairTaskWhy">
          <el-input v-model="ruleForm.repairTaskWhy" placeholder="请输入工单任务执行原因" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ text }}</el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 更新 -->
    <el-dialog :title="titlew" :visible.sync="dialogUpdata" width="70%">
      <el-form label-width="160px" class="demo-ruleForm">
        <!-- <el-form-item label="设备类型" prop="equipmentType">
          <el-select v-model="ruleForm.equipmentType" placeholder="请选择设备类型">
            <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="所在小区" prop="estateIdConfig">
          <el-select v-model="estateIdConfig" placeholder="请选择所在小区">
            <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName"
              :value="item.estateId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitConfig('ruleForm')">确定</el-button>
          <el-button @click="resetForms()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { repairTaskList, getEquipment, getEstate, delRepairTask, updateSaveRepairTask, maintenance, configuration, firmware } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      title: '添加工单任务',
      text: '立即创建',
      titlew: '远程配置更新',
      dialogFormVisible: false,
      dialogUpdata: false,
      deviceTypeList: commonData.equipmentTypeList,
      deviceLogType: commonData.deviceLogType,
      repairTaskStates: commonData.repairTaskState,
      total: 10,
      page: 1,
      size: 10,
      formLabelWidth: '160px',
      tableData: [],
      deviceIdList: [],
      estateIdList: [],
      repairList: [], // 维修师傅
      input: '',
      type: '',
      deviceType: '',
      deviceState: '',
      span: 11,
      estateIdConfig: '',
      // 表单
      ruleForm: {
        repairTaskName: '',
        equipmentId: '',
        equipmentType: '',
        estateId: '',
        repairAcceptanceState: '',
        repairAcceptanceUserId: '',
        repairTaskState: '',
        repairTaskResults: '',
        userId: ''
      },
      rules: {
        repairAcceptanceUserId: [{ required: true, message: '请输入工单任务验收人', trigger: 'blur' }],
        repairTaskResults: [{ required: true, message: '请输入工单任务执行结果', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getgetEquipment()
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取
    getList () {
      const data = {
        page: this.page,
        size: this.size
      }
      repairTaskList({ ...data }).then(res => {
        if (res.code == 0) {
          const { records, total } = res.page
          this.total = total
          this.tableData = records.map(item => {
            let estateName
            let equipmentName
            let userName
            for (let i = 0; i < this.estateIdList.length; i++) {
              if (item.estateId == this.estateIdList[i].estateId) {
                estateName = this.estateIdList[i].estateName
                break
              }
            }
            for (let j = 0; j < this.deviceIdList.length; j++) {
              if (item.equipmentId == this.deviceIdList[j].deviceId) {
                equipmentName = this.deviceIdList[j].deviceName
                break
              }
            }
            for (let h = 0; h < this.repairList.length; h++) {
              if (item.userId == this.repairList[h].value) {
                userName = this.repairList[h].label
                break
              }
            }
            return {
              ...item,
              estateName,
              equipmentName,
              userName
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取下拉列表数据
    getgetEquipment () {
      getEquipment().then(res => {
        if (res.code === 0) {
          this.deviceIdList = res.list
        }
      })
      getEstate().then(res => {
        if (res.code === 0) {
          this.estateIdList = res.list
        }
      })
      const data = {
        page: 1,
        size: 9999
      }
      maintenance({ ...data }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.repairList = records.map(item => {
            return {
              label: item.userName,
              value: item.userId
            }
          })
        }
      })
    },
    handlerQuery (e) {

    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            ...this.ruleForm
          }
          updateSaveRepairTask(data).then(res => {
            if (res.code === 0) {
              this.dialogFormVisible = false
              this.$message.success('分配成功')
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm (formName) {
      this.dialogFormVisible = false
      // this.ruleForm = {
      // }
    },
    // 编辑
    handleEdit (row) {
      this.text = '立即分配'
      this.title = '分配工单任务'
      this.dialogFormVisible = true
      this.ruleForm = {
        repairTaskId: row.repairTaskId,
        repairTaskName: row.repairTaskName,
        equipmentId: row.equipmentId + '',
        equipmentType: row.equipmentType,
        estateId: row.estateId,
        repairAcceptanceState: row.repairAcceptanceState + '',
        repairAcceptanceUserId: row.repairAcceptanceUserId + '',
        repairTaskState: row.repairTaskState,
        repairTaskWhy: row.repairTaskWhy,
        userId: row.userId
      }
    },
    // 分页
    handleSizeChange (val) {
      this.size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    // 远程配置更新
    handlerConfig () {
      this.titlew = '远程配置更新'
      this.dialogUpdata = true
      this.estateIdConfig = ''
    },
    // 远程固件更新
    handlerFirmware () {
      this.titlew = '远程固件更新'
      this.dialogUpdata = true
      this.estateIdConfig = ''
    },
    resetForms () {
      this.dialogUpdata = false
      this.estateIdConfig = ''
    },
    // 确定
    submitConfig () {
      if (this.estateIdConfig == '') {
        this.$message.warning('请选择所在小区')
        return
      }
      const data = {
        estateId: this.estateIdConfig
      }
      if (this.titlew = '远程固件更新') {
        configuration(data).then(res => {
          if (res.code === 0) {
            this.dialogUpdata = false
            this.$message.success('远程配置更新成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        firmware(data).then(res => {
          if (res.code === 0) {
            this.dialogUpdata = false
            this.$message.success('远程固件更新成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.page {
  height: 100%;
}

.nuclein-query {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #DCDFE6;
}

.content-row {
  overflow: hidden;
}

.device-type {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px 20px;
}

/* 分页 */
.pagination {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #DCDFE6;
}

.drawer-table {
  padding: 20px;
}
</style>
